<template>
  <el-row>
    <el-col :span="5" class="small board-options">
      <p>持续时间：{{data.duration}}</p>
      <p>人数：{{data.pNum}}</p>
      <p>球：{{data.ballNum}}</p>
      <p>篮筐：{{data.basckety}}</p>
      <p>锥桶数量：{{data.instrument}}</p>
      <p>是否分组：{{data.isGroup}}</p>
      <p>其他：{{data.others}}</p>
    </el-col>
    <el-col :span="6" class="center">
      <img :src="data.src">
    </el-col>
    <el-col :span="10" class="small" v-html="decodeURIComponent(data.description)">
    </el-col>
    <el-col :span="3">
      <span v-if="showUp" class="borad-icon icon-first" @click="handleUp">
        <i class="icon iconfont">&#xe65f;</i>
      </span>
      <span v-if="showDown" class="borad-icon" @click="handleDown">
        <i class="icon iconfont">&#xe662;</i>
      </span>
      <span v-if="showDelete" class="borad-icon icon-last" @click="handleDelete">
        <i class="icon iconfont">&#xe66a;</i>
      </span>
    </el-col>
  </el-row>
</template>
<script>
export default{
  props: {
    data: Object,
    showUp: Boolean,
    showDown: Boolean,
    showDelete: Boolean,
    src: {
      type: String,
      default: '/static/images/board/board_04.jpg'
    }
  },
  data () {
    return {}
  },
  methods: {
    handleDown () {
      this.$emit('down', this.data)
    },
    handleUp () {
      this.$emit('up', this.data)
    },
    handleDelete () {
      this.$emit('delete', this.data)
    }
  }
}

</script>
<style lang="scss">
.board-options{
  padding-left: 28px;
}
.small {
  min-height: 21px;
}
.borad-icon{
  margin: 20px auto 20px;
  display:block;
  text-align: center;
  vertical-align: middle;
  position: relative;
  &.icon-last{
    margin-bottom:0;
  }
  i{
    color: #dcdcdc;
    font-size: 20px;
  }
  &:hover{
    border-color:#33c378;
    i{
      color: #33c378;
    }
  }
}

</style>